<script lang="ts" setup>
import { computed, ref, watch } from 'vue';
import { DeviceFunctionServiceCommandParam, DeviceServiceDetailResult, DeviceStatusServiceStatusListResult, I, select, slider, switchs } from '../interface';

const p = defineProps<{ device: DeviceServiceDetailResult, list?: DeviceStatusServiceStatusListResult, commands: (devicelistoption: DeviceFunctionServiceCommandParam) => void, reset: (v: DeviceServiceDetailResult) => void }>()


const objdata = [
    switchs,
    select,
    slider
]

interface II {
    name: string
    rander: string
    value: any,
    code: string
    disable?: boolean
    min?: number
    max?: number
    step?: number
    options?: { label: string, value: any }[]
}

const status = ref<II[]>(getstatus(p.list?.status))

function getstatus(status?: {
    code: string;
    value: any;
}[]) {
    return status?.filter(status => {
        const v = objdata.find(c => c.category?.find(t => t.name === p.device.category && status.code === t.code))
        return v
    }).map(status => {
        const v = objdata.find(c => c.category?.find(t => t.name === p.device.category && status.code === t.code)) as I
        const category1 = v?.category?.find(t => t.code === status.code)
        if (category1) {
            const { name, dataname, code, ...obj } = category1
            const data: II = {
                name: dataname ? dataname : v.name,
                value: status.value,
                code: status.code,
                rander: v.rander,
                ...obj
            }
            return data
        }
        return {
            ...status,
            rander: '',
            name: ''
        }

    }) || []
}

function commands() {
    const data = status.value.map(e => {
        return {
            code: e.code,
            value: e.value
        }
    })
    p.commands({ device_id: p.device.id, commands: data })
}

watch(() => p.device, e => {
    status.value = getstatus(p.list?.status)
})

watch(() => p.list?.status, e => {
    status.value = getstatus(p.list?.status)
})

</script>

<template>
    <div class="instruct">
        <div v-for="i in status">
            <div v-if="i.rander === 'switch'" class="instructswitch instruct-item">
                <div class="flex1">{{ i.name }}</div>
                <div class="instruct-switch">
                    <el-switch size="large" :disabled="i.disable" v-model="i.value"></el-switch>
                </div>
            </div>
            <div v-else-if="i.rander === 'select'" class="instructselect instruct-item">
                <div class="flex1">{{ i.name }}</div>
                <div class="instruct-select">
                    <el-select size="large" :disabled="i.disable" v-model="i.value">
                        <el-option v-for="item in i.options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </div>

            </div>
            <div v-else-if="i.rander === 'slider'" class="instructslider instruct-item">
                <div class="flex1">{{ i.name }}</div>
                <div class="instruct-slider">
                    <el-slider size="large" width v-model="i.value" :disabled="i.disable" :max="i.max" :min="i.min"
                        :step="i.step" show-input></el-slider>
                </div>
            </div>
        </div>
        <div>
            <ElButton @click="() => p.reset(p.device)">重置</ElButton>
            <ElButton @click="() => commands()">发送指令</ElButton>
        </div>
    </div>
</template>

<style scoped>
.instruct {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 24px;
    gap: 24px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 5px 15px 35px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(60px);
    border-radius: 24px;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.instruct-item {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: center;
}

.instruct-slider {
    width: calc(100% - 220px);
    --el-slider-height: 9px;
}

.flex1 {
    flex: 1 0 0%;
}

/* Rectangle 393 */

.instruct-switch {
    box-sizing: border-box;
    width: 240px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 48px;
    display: flex;
    align-items: center;
    justify-content: right;
    padding: 9px;
}
</style>

<style>
.el-switch--large .el-switch__core {
    height: 30px !important;
    border-radius: 15px !important;
    min-width: 52px !important;
}

.el-switch--large .el-switch__core .el-switch__action {
    height: 24px !important;
    width: 24px !important;
}
</style>

<style>
.instruct-select .el-input__wrapper {
    --el-input-border-radius: 48px;
}
</style>